<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>用户信息表</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<style>
	body {  
		background-image:url('http://8.137.88.11:3500/img/20.png');
	    font-family: Arial, sans-serif;  
	    display: flex;  
	    flex-direction: column;  
	    align-items: center; /* 垂直居中 */     
	    text-align: center; /* 水平居中标题 */  
	}  
	  
	table {  
	    width: 100%;  
	    border-collapse: collapse;  
	}  
	tr{
		 background-color: #bdcbd2;
	}
	  
	th, td {  
	    padding: 30px;  
	    text-align: left;  
	    border-bottom: 1px solid #ce0000;  
	}  
	  
	th {  
	    background-color: #87c0ca;  
	}  
	  
	tr:hover {  
	    background-color: #98b6c2;  
	}
	h1{
		font-size:50px ;
		color:#a4c9cc;
	}
</style>
<body>  
    <h1>用户信息表</h1>  
    <table id="user-table">  
        <thead>  
            <tr>  
                <th>用户名：田鑫</th>  
                <th>专业：软件工程</th>  
                <th>年级：2023</th>  
                <th>班级：1班</th>  
                <th>联系方式：15922530878</th>  
                <th>家庭住址：重庆</th>  
                <th>籍贯信息：重庆綦江</th>  
            </tr>  
        </thead>  
        <tbody>  
            <!-- 用户信息将在这里动态生成 -->  
        </tbody>  
    </table>   
</body>  
<script type="text/javascript">
//假设的用户信息数组  
	const userData = [  
	    { username: '赵小白', major: '软件技术', grade: '2023', class: '2班', contact: '2023520773' },  
	    { username: '天天', major: '软件技术', grade: '2023', class: '1班', contact: '2023520787' },  
	    { username: '静儿', major: '软件（3+2）', grade: '2023', class: '1班', contact: '2023520466' },  
	    { username: '兰儿', major: '软件（3+2）', grade: '2023', class: '2班', contact: '2023520067' },  
	    // ... 可以添加更多用户信息  
	];  
	  
	// 获取表格的tbody元素  
	const tableBody = document.querySelector('#user-table tbody');  
	  
	// 遍历用户数据并创建表格行  
	userData.forEach(user => {  
	    const row = document.createElement('tr');  
	    const cells = [  
	        document.createElement('td'),  
	        document.createElement('td'),  
	        document.createElement('td'),  
            document.createElement('td'), 
            document.createElement('td'), 
	        document.createElement('td'),  
	        document.createElement('td')  
	    ];  
	  
	    cells.forEach((cell, index) => {  
	        cell.textContent = user[Object.keys(user)[index]];  
	        row.appendChild(cell);  
	    });  
	  
	    tableBody.appendChild(row);  
	});
</script>
</html>